<template>
	<!-- 展馆平面图 -->
	<view class="plan_warp mt-1 shadow rounded_10 bg-white p-1 position-relative">
		<u--image
			:showLoading="true"
			src="http://yunz.solarbe.com/upload/layedit/20230511/f1f369faa54185cb0f8d427bf42cc080.png"
			mode="aspectFill"
			width="100%"
			height="600rpx"
		></u--image>
		<!-- @click="ExhibitionHall(items, item.title, item.id, indexs)" -->
		<view class="box">
			<!-- N馆 -->
			<view class="bigN flex justify-between">
				<text v-for="(nItem, nIdx) of Nlist.lower_level" :key="nIdx" v-if="nIdx < 5" @click="toDetail(Nlist.id, 1, nItem.id, nIdx)">{{ nItem.title }}</text>
			</view>
			<view class="smallN flex justify-between font_22">
				<view class="small_item_1 flex justify-between flex-row-reverse">
					<text v-for="(nItem, nIdx) of Nlist.lower_level" :key="nIdx" v-if="nIdx >= 8 && nIdx <= 10" @click="toDetail(Nlist.id, 1, nItem.id, nIdx)">
						{{ nItem.title }}
					</text>
				</view>
				<view class="small_item_2 flex justify-between">
					<text v-for="(nItem, nIdx) of Nlist.lower_level" :key="nIdx" v-if="nIdx >= 5 && nIdx < 8" @click="toDetail(Nlist.id, 1, nItem.id, nIdx)">
						{{ nItem.title }}
					</text>
				</view>
			</view>
			<!-- W馆 -->
			<view class="bigW flex justify-between flex-column-reverse">
				<text v-for="(wItem, wIdx) of Wlist.lower_level" :key="wIdx" v-if="wIdx < 5" @click="toDetail(Wlist.id, 2, wItem.id, wIdx)">{{ wItem.title }}</text>
			</view>
			<view class="smallW flex flex-column font_22">
				<view class="small_item_1 flex justify-between flex-column-reverse">
					<text v-for="(wItem, wIdx) of Wlist.lower_level" :key="wIdx" v-if="wIdx >= 5 && wIdx <= 7" @click="toDetail(Wlist.id, 2, wItem.id, wIdx)">
						{{ wItem.title }}
					</text>
				</view>
				<view class="small_item_2 flex justify-end">
					<text v-for="(wItem, wIdx) of Wlist.lower_level" :key="wIdx" v-if="wIdx >= 8 && wIdx < 10" @click="toDetail(Wlist.id, 2, wItem.id, wIdx)">
						{{ wItem.title }}
					</text>
				</view>
			</view>
			<!-- E馆 -->
			<view class="bigE flex justify-between flex-column-reverse">
				<text v-for="(eItem, eIdx) of Elist.lower_level" :key="eIdx" v-if="eIdx < 7" @click="toDetail(Elist.id, 0, eItem.id, eIdx)">{{ eItem.title }}</text>
				<text v-for="(eItem, eIdx) of Elist.lower_level" :key="eIdx" v-if="eItem.title == 'E15'" @click="toDetail(Elist.id, 0, eItem.id, eIdx)">{{ eItem.title }}</text>
			</view>
			<view class="smallE flex flex-column font_22">
				<text v-for="(eItem, eIdx) of Elist.lower_level" :key="eIdx" v-if="eItem.title == 'E13'" @click="toDetail(Elist.id, 0, eItem.id, eIdx)">{{ eItem.title }}</text>
				<view class="small_item_1 flex justify-between flex-column flex-column-reverse">
					<text v-for="(eItem, eIdx) of Elist.lower_level" :key="eIdx" v-if="eIdx >= 7 && eIdx <= 11" @click="toDetail(Elist.id, 0, eItem.id, eIdx)">
						{{ eItem.title }}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: ['exhibitionId', 'boxList'],
	data() {
		return {
			Elist: {},
			Nlist: {},
			Wlist: {}
		};
	},
	mounted() {
		this.Elist = this.boxList.filter(item => item.title == 'E馆')[0];
		this.Nlist = this.boxList.filter(item => item.title == 'N馆')[0];
		this.Wlist = this.boxList.filter(item => item.title == 'W馆')[0];
	},

	methods: {
		// 现场活动图片上的展位点击
		//N1 N2id 和W馆E馆名字和W馆E馆对应的id和N1 N2对应的索引
		toDetail(parentId, parentIdx, childId, childIdx) {
			uni.navigateTo({
				url:
					'/subPages/exhibition/gallery/index?exhibitionId=' +
					this.exhibitionId +
					'&parendId=' +
					parentId +
					'&idx=' +
					parentIdx +
					'&childId=' +
					childId +
					'&childIdx=' +
					childIdx
			});
		}
	}
};
</script>

<style lang="less" scoped>
// text {
// 	background-color: rgba(0, 0, 0, 0.3);
// 	border: 1px solid cyan;
// }
.plan_warp {
	width: 100%;
	color: transparent;
	.box {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		.bigN {
			width: 268rpx;
			height: 100rpx;
			position: absolute;
			top: 60rpx;
			left: 278rpx;
		}
		.smallN {
			width: 182rpx;
			height: 60rpx;
			position: absolute;
			top: 170rpx;
			left: 310rpx;
			.small_item_1 {
				width: 50rpx;
				text {
					width: 25rpx;
				}
			}
			.small_item_2 {
				width: 125rpx;
				text {
					width: 20rpx;
				}
				text:last-child {
					width: 65rpx;
					height: 30rpx;
				}
			}
		}
		.bigW {
			width: 105rpx;
			height: 268rpx;
			position: absolute;
			top: 175rpx;
			left: 165rpx;
		}
		.smallW {
			width: 50rpx;
			height: 150rpx;
			position: absolute;
			top: 227rpx;
			left: 285rpx;
			.small_item_1 {
				height: 80rpx;
				text {
					height: 25rpx;
				}
			}
			.small_item_2 {
				width: 50rpx;
				text {
					width: 20rpx;
					height: 60rpx;
				}
			}
		}
		.bigE {
			width: 105rpx;
			height: 420rpx;
			transform: rotate(44.5deg);
			position: absolute;
			top: 120rpx;
			left: 419rpx;
		}
		.smallE {
			width: 54rpx;
			height: 150rpx;
			transform: rotate(44.5deg);
			position: absolute;
			top: 190rpx;
			left: 383rpx;
			text {
				height: 18rpx;
			}
			.small_item_1 {
				height: 130rpx;
			}
		}
	}
}
</style>
